<template>
  <el-dialog
  title="书本简介"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">

  <h1>{{bookname}}</h1>
  <el-card style="width: 135px;margin-bottom: 20px;height: 250px;float: left;margin-right: 15px" class="book">
    <div class="cover"> 
    <img :src="cover"/>
</div>
</el-card>
  
 
  <p>{{author}}</p>
  <p>{{abs}}</p>
  <span>{{date}}</span>
  <span>{{press}}</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
</template>
<script>
export default {
    name: "Information",
    data() {
      return {
          dialogVisible: false,
          bookname: '',
          author: '',
          abs: ' ',
          cover: '',
          date: '',
          press:''
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  
}
</script>
<style scoped>
  .cover {
    width: 115px;
    height: 172px;
    margin-bottom: 7px;
    overflow: hidden;
    cursor: pointer;
  }
  img {
    width: 115px;
    height: 172px;
    /*margin: 0 auto;*/
  }
   span{
    margin-right: 48px;
  }
</style>
